$(document).ready(function() {
    $('#send').click(function() {
        var username = $('#username').val();
        var messageText = $('#message').val();
        var timestamp = new Date().toLocaleTimeString();

        if (username && messageText) {
            // 发送消息到服务器的代码可以在这里添加（如果需要）

            // 添加消息到聊天记录中
            appendMessageWithDelete($('#messages'), username, messageText, timestamp);

            // 清空消息输入框
            $('#message').val('');
        } else {
            alert('Please enter a username and message.');
        }
    });
});

function appendMessageWithDelete(container, username, messageText, timestamp) {
    // 创建消息元素
    var messageHtml = $('<div class="message">')
        .append($('<span class="timestamp">').text(timestamp + ' '))
        .append($('<span class="username">').text(username + ': '))
        .append($('<span class="message-text">').text(messageText) + ' ')
        .append($('<button class="delete-btn">').text('Delete'));

    // 将消息添加到容器中
    container.append(messageHtml);

    // 为删除按钮添加点击事件监听器
    messageHtml.find('.delete-btn').on('click', function() {
        $(this).parent('.message').remove();
    });
}